<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <q-form @submit="submit">
            <q-input v-model="keyString">
              <template v-slot:append>
                <q-btn flat round type="submit" icon="search" @click="submit"/>
              </template>
            </q-input>
          </q-form>
        </div>
      </div>
      <div class="row q-col-gutter-md" v-if="list">
        <div class="col-xs-6 col-xs-4 col-md-2"
             v-for="item in list"
             :key="item.id">
          <router-link :to="`/video/${item.vid}`">
            <div class="row q-gutter-xs">
              <div class="col-12">
                <q-img :src="`api/upload/cover/${item.vid}_${item.cover}`"
                       :ratio="4/3"/>
              </div>
              <div class="col-12">
                <q-item-label :lines="1">{{ item.title }}</q-item-label>
              </div>
              <div class="col-12">
                <q-item-label :lines="1" caption>{{ item.username }}</q-item-label>
              </div>
              <q-tooltip>{{ item.title }}</q-tooltip>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  export default {
    name: "Search",
    data: function () {
      return {
        keyString: '',
        list: null
      };
    },
    methods: {
      async submit() {
        this.$q.loading.show();
        try {
          let key = this.keyString.split(' ');
          let data = await this.$axios.post('api/video/search', { key });
          if(data) {
            this.list = data;
          }
        } catch {}
        this.$q.loading.hide();
      }
    }
  }
</script>

<style scoped>

</style>
